<template>
  <div>
    <el-row>
      <Title :saying="saying">
        <h1 slot="title">{{ msg }}</h1>
      </Title>
      <Information>
      <el-row >
         <el-card class="info">
<!--             <el-image  :src="src"></el-image>-->
            <el-row class="row-in">
                <el-row>
                  <el-col :span="12">
                    <el-image :src="src"></el-image>
                  </el-col>
                  <el-col :span="10">
                    <ul>
                      <li v-for="(item,index) in info" :key="index">
                        <h2 v-if="index==0"><i >刘洪</i></h2>
                         <h4 v-else><i :class="item.k">&nbsp;&nbsp;&nbsp;&nbsp;{{item.val}}</i></h4>
                      </li>
                    </ul>
                  </el-col>
                </el-row>
                <el-row class="boder">
                  <h3><i class="el-icon-star-on">&nbsp;&nbsp;&nbsp;&nbsp;生为码农当有鸿鹄之志，即入内卷应有不屈之心。乾坤未定你我皆是黑马，胜负未分怎能轻易言弃！</i></h3>
                </el-row>
            </el-row>
         </el-card>
      </el-row>
      </Information>
    </el-row>
  </div>
</template>

<script>
import Information from "./Information.vue";
import Title from "./Title.vue";

export default {
  name: "AboutMe",
  data() {
    return {
      msg: "个人简介",
      saying: "万千猿军一将，心怀架构梦想。",
      src: require("../assets/heard1.png"),
      info: [],
    };
  },
  components: { Title, Information },
  methods: {
    infos() {
      this.$Sev.post("/api/intro", {}, (data) => {
        this.info = data;
      });
    },
  },
  mounted() {
    this.infos();
  },
};
</script>
<style scoped>
.row-in{
  background-color: white;
}
.info{
  margin: 0 auto;
  margin-top: 50px;
  background-color: #2c3e50;
  width: 80%;
}
.el-image {
  margin-top: 40px;
  width: 300px;
  height: 300px;
}

ul{
  padding-top: 30px;;
  background-color: #2c3e50;
  color: white;
  margin: 0;
  height: 350px;
}
li{
  list-style-type:none;
  text-align: left;
}
.boder{
  height: 80px;
}
.mcard{
  margin: 0 auto;
}
</style>
